<template>
	<view class="deviceList-container">
		<view class="deviceList-box">
			<z-paging ref="paging" :fixed="false" v-model="deviceList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view v-for="item in deviceList" :key="item.id" class="deviceList-item">
					<view class="item-header">
						<view class="deviceNo">设备编号：{{ item.deviceId }}</view>
						<view v-if="item.bindStatus == '已安装'" class="deviceInstall status">{{ item.bindStatus }}</view>
						<view v-else class="deviceUnInstall status">{{ item.bindStatus }}</view>
					</view>
					<view class="item-body">
						<view class="body-title">
							<view v-if="item.isFast == 1" class="device-type status acvive">快充</view>
							<view v-else class="device-type status">慢充</view>
							<view v-if="item.isOnline == 1" class="device-online status acvive">在线</view>
							<view v-else class="device-online status">离线</view>
						</view>
						<view class="body-body">
							<view class="body-line">
								<view class="line-label">商户名称</view>
								<view class="line-value">{{ item.siteName }}</view>
							</view>
							<view class="body-line">
								<view class="line-label">安装时间</view>
								<view class="line-value">{{ item.bindSiteTime }}</view>
							</view>
							<view class="body-line">
								<view class="line-label">安装天数</view>
								<view class="line-value">{{ item.bindDays }}天</view>
							</view>
						</view>
					</view>
					<view v-if="userStore.userInfo.userRole == '1'" class="body-footer">
						<view class="btn">解绑设备</view>
					</view>
					
					<view class="body-footer">
						<view @click="unbindDeviceFun" class="btn">解绑设备</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
	
	<commonDialog :dialogShow="showDialog" dialogTitle="确认解绑" dialogContent="" @closeSDialog="closeSDialog"></commonDialog>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAdminStoreDeviceList, unbindDevice } from '@/api/storeDeviceList.js';
import { useUserStore } from '@/store/userStore';
import commonDialog from '@/components/common-dialog/index.vue';

// 实例化用户store
const userStore = useUserStore();

// 页面数据初始化
const storeId = ref('');
const storeName = ref('');
onLoad((options) => {
	console.log(options);
	storeId.value = options.id;
	storeName.value = options.storeName;
});

// 页面数据初始化
const initData = (pageNum = 1, pageSize = 10) => {
	switch (userStore.userInfo.userRole){
		case 3:
			getAdminStoreDeviceListFun(pageNum, pageSize)
			break;
		default:
			break;
	}
};

// 获取管理员角色的商户设备列表
const getAdminStoreDeviceListFun = async (pageNum, pageSize) => {
	const res = await getAdminStoreDeviceList({
		siteId: storeId.value,
		siteName: storeName.value,
		pageNum,
		pageSize
	});
	
	if (res.code == 200) {
		total.value = res.total;
		paging.value.complete(res.rows);
	}
};

// 设备列表
const deviceList = ref([]);

// 查询设备列表
const total = ref('');
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	initData(pageNo, pageSize);
	// paging.value.complete([1, 2, 3, 4]);
};

// 解绑设备
const showDialog = ref(false);
const unbindDeviceFun = async () => {
	showDialog.value = true;
};

// 关闭弹窗
const closeSDialog = () => {
	showDialog.value = false;
};
</script>

<style lang="scss" scoped>
.deviceList-container {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.deviceList-box {
		height: calc(100vh - 48rpx);

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.deviceList-item {
			border-radius: 24rpx;
			padding: 32rpx 24rpx 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.deviceNo {
					color: #333;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.status {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: center;
					width: 84rpx;
					height: 32rpx;
					font-size: 20rpx;
					border-radius: 6rpx;
				}

				.deviceInstall {
					color: $uni-main-color;
					background-color: rgba(0, 197, 130, 0.12);
				}

				.deviceUnInstall {
					color: #999;
					background-color: rgba(153, 153, 153, 0.12);
				}
			}

			.item-body {
				padding: 24rpx 0;

				.body-title {
					display: flex;
					gap: 24rpx;
					flex-wrap: nowrap;
					align-items: center;
					margin-bottom: 20rpx;

					.status {
						color: #999;
						background-color: rgba(153, 153, 153, 0.12);
						font-size: 20rpx;
						line-height: 32rpx;
						padding: 0 12rpx;
						border-radius: 6rpx;
					}

					.acvive {
						color: $uni-main-color;
						background-color: rgba(0, 197, 130, 0.12);
					}
				}

				.body-body {
					display: flex;
					flex-direction: column;
					gap: 20rpx;

					.body-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.line-label,
						.line-value {
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.line-label {
							min-width: 5em;
							color: #999;
						}

						.line-value {
							flex: 1;
							color: #333;
						}
					}
				}
			}

			.body-footer {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-end;
				padding-top: 20rpx;
				border-top: 2rpx solid #f0f0f0;

				.btn {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 8rpx 16rpx;
					border-radius: 12rpx;
					background-color: $uni-main-color;
				}
			}
		}
	}
}
</style>
